<template>
    <div class="edit-dialog-container">
        <el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="869px" destroy-on-close>
            <el-form ref="userDialogFormRef" :model="state.content" :rules="formRules" size="default" label-width="90px">
                <el-row :gutter="35">
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item prop="code" label="区域编号">
                            <el-input v-model="state.content.code" placeholder="请输入区域编号" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item prop="name" label="区域名称">
                            <el-input v-model="state.content.name" placeholder="请输入区域名称" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item prop="longitude" label="区域图片">
                            <el-tooltip placement="top">
                                <template #content>点击预览区域图片</template>
                                <el-image
                                    style="width: 90px; height: 90px;border: 1px dashed #ccc;box-sizing: border-box;margin-left: 5px;"
                                    class="image-show" :preview-src-list="[`data:image/jpg;base64,${state.content.image}`]"
                                    :src="`data:image/jpg;base64,${state.content.image}`">
                                    <template #error>
                                        <div class="image-slot">
                                            暂无区域图片
                                        </div>
                                    </template>
                                </el-image>
                            </el-tooltip>
                            <el-upload :show-file-list="false" action="" :before-upload="beforeAvatarUpload"
                                style="margin-left: 24px;">
                                <el-button type="primary" size="small">
                                    上传
                                </el-button>
                            </el-upload>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>

            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="onSubmit" type="success" size="default">{{ t('message.btnName.submit')
                    }}</el-button>
                    <el-button @click="onCancel" size="default">{{ t('message.btnName.cancel') }}</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts" >
import { reactive, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { ElMessage } from 'element-plus';
import { useAccessAreaCreateApi, useAccessAreaQueryApi, useAccessAreaUpdateApi } from '/@/api/access/area';
import { fileToBase64 } from '/@/utils/files';
import { useLadderAreaCreateApi, useLadderAreaQueryApi, useLadderAreaUpdateApi } from '/@/api/ladder/area';

// 定义子组件向父组件传值/事件
const { t } = useI18n();
const emit = defineEmits(['refresh']);

const useContent = () => {
    return {
        code: '',
        name: '',
        image: ''
    }
}

const state = reactive({
    content: {} as any,
    parentCode: '',
    dialog: {
        isShowDialog: false,
        type: 0,
        title: '',
    },
});

const beforeAvatarUpload: UploadProps['beforeUpload'] = rawFile => {
    if (!rawFile.type.includes('image')) {
        ElMessage.error('图片格式不正确!')
        return false
    }
    fileToBase64(rawFile).then((res) => {
        state.content.image = res as string
    })
    return true
}

// 表单校验
const formRules = ref({
    code: [
        { required: true, message: '必填项不能为空', trigger: 'blur' },
    ],
    name: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
})

// 打开弹窗
const openDialog = async (code?: string) => {
    state.dialog.isShowDialog = true
    console.log(code)
    if (code) {
        state.dialog.title = '编辑'
        state.dialog.type = 1
        state.parentCode = code
        queryItem(code)
    } else {
        state.dialog.title = t('message.btnName.addRow')
        state.dialog.type = 0
        state.content = useContent()
    }
};
// 关闭弹窗
const closeDialog = () => {
    state.dialog.isShowDialog = false;
    state.content = useContent()
    emit('refresh');
};
// 取消
const onCancel = () => {
    closeDialog();
};
const queryItem = (code: string) => {
    useLadderAreaQueryApi(code).then(({ content }) => {
        state.content = content
    })
}

// 提交
const onSubmit = () => {
    if (state.dialog.type === 1) {
        useLadderAreaUpdateApi(Object.assign(state.content, { parentCode: state.parentCode })).then(({ content }) => {
            console.log(content);
        }).then(() => {
            ElMessage({
                type: 'success',
                message: '操作成功'
            })
            closeDialog()
        })
    } else {
        useLadderAreaCreateApi(Object.assign(state.content)).then(({ content }) => {
            console.log(content);
        }).then(() => {
            ElMessage({
                type: 'success',
                message: '操作成功'
            })
            closeDialog()
        })
    }
};

defineExpose({
    openDialog,
});
</script>


<style scoped lang="scss">
:deep(.el-dialog__header) {
    margin: 0;
    border-bottom: 1px dashed rgba(0, 0, 0, .2);
}

:deep(.el-dialog__footer) {
    border-top: 1px dashed rgba(0, 0, 0, .2);
}
</style>